<template>
  <div class="wrapper">
    <div class="detail">
      <div>
        <img
          :src="
            product.mainImgUrl ||
            'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'
          "
          class="image"
        />
      </div>
      <div class="detail__desc">
        <h2 class="title">
          {{ product.name }}
        </h2>
        <p class="point">{{ product.sellingPoint }}</p>
        <div class="price-and-count">
          <p>
            <span class="label">价格</span>
            <span class="price">￥{{ product.price }}</span>
          </p>
          <p>
            <span class="label">剩余库存</span>
            <span>{{ product.stock }}</span>
          </p>
        </div>
        <div class="select-count">
          <label>
            <span class="label">数量:</span>
            <el-input-number
              v-model="selectCount"
              :min="1"
              :max="product.stock"
              label="描述文字"
            ></el-input-number>
          </label>
        </div>
        <div class="buttons">
          <el-button type="danger" size="medium" @click="toPay"
            >立即购买</el-button
          >
          <el-button type="danger" size="medium" plain @click="addToCart"
            >加入购物车</el-button
          >
        </div>
        <div class="divider"></div>
        <div class="desc">
          {{ product.detail }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  onMounted,
  ref,
  computed,
} from '@vue/composition-api';
import { useNav } from '../../hooks';
import { getProduct } from '../../api/user';
import { addCart } from '../../api/user/cart';
import { RouterMap } from '../../utils/constants';
import { getUser } from '../../utils/baseinfo';
import { Message } from 'element-ui';

export default defineComponent({
  setup(props, context) {
    const { to, getQuery, toParam } = useNav(context);
    const itemId = ref('');
    const product = ref({
      mainImgUrl: '',
    });

    const selectCount = ref(1);

    // 立即购买
    const toPay = () => {
      const newProduct = {
        productId: product.value.id,
        productPrice: product.value.price,
        productCount: selectCount.value,
        sellingPoint: product.value.sellingPoint,
        total: product.value.price * selectCount.value,
      };

      toParam(RouterMap.Pay, { data: [newProduct] });
    };

    // 加入购物车
    const addToCart = () => {
      console.log('jinru');
      const userId = getUser() != null ? getUser().id : '';
      const productId = product.value.id;
      const count = selectCount.value;
      addCart(userId, productId, count)
        .then((response) => {
          Message.success('成功添加购物车');
        })
        .catch((error) => {
          console.log(error);
        });
    };

    onMounted(() => {
      itemId.value = getQuery('itemId');
      // itemId.value = 1;
      // request
      getProduct(1, 1, { id: itemId.value }).then((response) => {
        product.value = response.data.products[0];
        console.log('商品详情');
        console.log(product.value);
      });
    });

    return {
      selectCount,
      product,
      toPay,
      addToCart,
    };
  },
});
</script>

<style lang="less" scoped>
.wrapper {
  padding: 40px 0;
  background: #f9f9f9;
  .detail {
    width: 1200px;
    margin: 0 auto;
    padding: 1rem;
    background: #fff;
    display: flex;
    .image {
      width: 400px;
    }

    &__desc {
      flex: 1;
      padding: 1rem 0 0 1rem;
      .point {
        font-size: 0.9rem;
        color: #999;
        margin: 1rem;
      }
      .price-and-count {
        background: #f9f9f9;
        display: flex;
        justify-content: space-between;
        margin: 1rem 0;
        padding: 1rem 2rem;
        > p {
          flex: 1;
          display: flex;
          align-items: center;
        }
        .label {
          margin-right: 10px;
          font-size: 0.9rem;
          color: #999;
        }
        .price {
          font-size: 1.2rem;
          height: 30px;
          line-height: 30px;
          align-items: baseline;
          color: #e1251b;
        }
      }
      .select-count {
        margin: 2rem 0;
        .label {
          font-size: 0.9rem;
          color: #999;
          margin: 1rem;
        }
      }
      .buttons {
        margin: 2rem 1rem;
      }
      .divider {
        width: 100%;
        height: 2px;
        background: rgb(255, 48, 48);
      }
      .desc {
        padding: 1rem;
        text-indent: 2em;
      }
    }
  }
}
</style>
